<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Regions: onmouseup events inside region</title>
        <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
        <meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
            tree. Therefore, onmouseup events inside a named flow should function correctly.">
        <meta name="flags" content="dom interact">
        <link href="support/css/regions-mouse-events.css" rel="stylesheet" type="text/css">
        <link href="/resources/testharness.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/regions-mouse-events-test-helper.js"></script>
    </head>
    <body>
        <p id="msg">Mouse up on the black square (Press the mouse button down somewhere outside the black square.  Then drag the mouse to the black square.  Release the mouse button while on the black square.)</p>
        <div id="content">
            <div class="block"></div>
            <div class="block"></div>
            <div id="target-block" class="block"></div>
        </div>
        <div class="region"></div>
        <div class="region"></div>
        <div class="region"></div>
        <br/>
        <div id="log"></div>
    </body>
     <script type="text/javascript">

        if(getLeftPosition("target-block") !== 0) {
            var test1 = async_test("onmouseup event fired inside region", {timeout: testTimeout});
            test1.step(function () {
                var testTarget = document.getElementById("target-block");
                testTarget.onmouseup = test1.step_func(function (evt) {

                    /* Verify the target inside the region has the correct ID */
                    test(function() {
                        assert_equals(evt.target.id, "target-block");
                    }, "Target that mouseup was performed on inside region has correct ID");

                    test1.done();
                });
                mouseUp("target-block");
            });
            completionCallback();
        }
        else {
            test(function () {
                assert_true(false);
            }, "Regions are not enabled");
        }

    </script>
</html>